<template>
  <el-dialog
    custom-class="crud-dialog"
    :visible="isShowVis"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
    lock-scroll
    title="修改密码"
    width="680px"
  >
    <avue-form ref="form" v-model="form" :option="formOption"></avue-form>
    <template #footer>
      <el-button type="primary" @click="formSubmit">确定</el-button>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { updataPassword } from "@/api/system";
export default {
  props: {
    isShowVis: {
      type: Boolean,
      defalut: false,
    },
  },
  data() {
    return {
      loading: false,
      form: {},
    };
  },
  computed: {
    formOption() {
      return {
        submitBtn: false,
        emptyBtn: false,
        menuBtn: true,
        labelWidth: 120,
        card: true,
        gutter: 20,
        menuSpan: 24,
        tabs: false,
        enter: false,
        labelPosition: "left",
        column: [
          {
            label: "原密码",
            prop: "oldPassword",
            span: 24,
            type: "password",
            maxlength: 12,
            rules: [
              {
                required: true,
                message: "请输入原密码",
                trigger: "blur",
              },
              // {
              //   pattern:
              //     /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
              //   message: "请输入正确格式密码",
              // },
            ],
          },
          {
            label: "新密码",
            prop: "newPassword",
            span: 24,
            type: "password",
            maxlength: 12,
            rules: [
              {
                required: true,
                message: "请输入新密码",
                trigger: "blur",
              },
              {
                pattern:
                  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
                message:
                  "请输入长度为6-12位，至少含数字/字母/符号两种组合的密码",
              },
            ],
          },
          {
            label: "确认密码",
            prop: "confirmPassword",
            span: 24,
            type: "password",
            maxlength: 12,
            rules: [
              {
                required: true,
                message: "请输入确认密码",
                trigger: "blur",
              },
              {
                pattern:
                  /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~@#%$&!^?;:'\"<>()]{6,12}$/,
                message:
                  "请输入长度为6-12位，至少含数字/字母/符号两种组合的密码",
                trigger: "blur",
              },
            ],
          },
        ],
      };
    },
  },
  methods: {
    close() {
      this.$emit("update:isShowVis", false);
      this.$refs.form.resetForm();
    },

    formSubmit() {
      this.$refs.form.validate((validate, done, msg) => {
        if (validate) {
          console.log(this.form);
          if (this.form.newPassword !== this.form.confirmPassword) {
            this.$message.warning("新密码和确认密码不一致！");
            done();
            return false;
          }
          this.loading = true;
          updataPassword({
            oldPwd: this.form.oldPassword,
            newPwd: this.form.newPassword,
            userId: this.$store.state.user.id,
          })
            .then(({ message }) => {
              this.$message.success(message);
              this.close();
            })
            .finally(() => {
              this.loading = false;
            });
        }
        done();
      });
    },
  },
};
</script>

<style scoped></style>
